
<template>
  <div class="flex wrap">
    <div v-for="item in nodeList" :style="{color: item.color}" :class="curNode === item? 'active' : ''" class="node flex a-item" >
      <img class="img" :src="Avatar" alt="">
      {{ nodeMap[item.value]+item.after }}
    </div>
  </div>
</template>

<script>
import Avatar from '@/assets/images/avatar.png'
export default {
  name: "flowStepNode",
  props:{
    flowStepNode:{
      type:Object,
      default:()=>{}
    },
    curNode:{
      type:String,
      default:""
    }
  },
  data(){
    return {
      nodeMap:{START:"发起人",BM:"业务经理",M:"经理",FD:"财务总监",FM:"费用主管",SM:"销售管理经理",HRD:"人力总监",VD:"副总经理",END:"结束"},
      nodeList:[],
      curNodeIndex:0,
      Avatar:Avatar
    }
  },
  created() {
    const tempList = this.flowStepNode.split(",")
    this.curNodeIndex = tempList.findIndex(item=>item === this.curNode)
    //渲染
    this.nodeList = tempList.map(
      (item,index)=>{
        const data = {value:item,after:'->',color:'#969896'}
        if(index < this.curNodeIndex){
          data.color="green"
        }else if(index === this.curNodeIndex){
          data.color="#0E5FFF"
        }
        return data
      }
    )
    this.nodeList[this.nodeList.length-1].after = ""
  }
}
</script>


<style scoped>
.node{
  font-size: 20px;
}
img{
    width: 20px;
    height: 20px;
    margin:0 5px;
}
</style>
